<template>
    <div>
        <nav class="webpage-articles-pages">
            <span class="webpage-articles-page"><a :href="data.baseUrl + '/1'"><<<span v-show="showFont">首页</span></a></span>
            <span class="webpage-articles-page"><a :href="previousPage" @click="toPreviousPage"><<span v-show="showFont">上一页</span></a></span>
            <ul class="pagelists">
                <li v-show="showBeforeEllipsis">...</li>
                <li v-for="(item,index) of data.totalPage" :key="index" class="pagelist">
                    <a :href="data.baseUrl + '/' + item">{{item}}</a>
                </li>
                <li v-show="showAfterEllipsis">...</li>
            </ul>
            <span class="webpage-articles-page"><a :href="nextPage"><span v-show="showFont">下一页</span>></a></span>
            <span class="webpage-articles-page"><a :href="endPage"><span v-show="showFont">尾页</span>>></a></span>
            <span class="webpage-articles-page"><span v-show="showFont">{{data.totalPage}}页共{{data.totals}}条</span></span>
        </nav>
    </div>
</template>

<script>
	export default {
		name: "PageSplit",
        props:['data'],
		data(){
			return {
				pageNum:7,//显示7个分页
				pageList:[],
				showBeforeEllipsis:false,
				showAfterEllipsis:false,
				showFont:true
			}
		},
		mounted(){
			this.pageList = document.getElementsByClassName('pagelist');
			setTimeout(()=>{
				this.pageList[this.data.page - 1].classList.add('page-selected');
			},0);
			//列表数量及文字调整
			if(window.innerWidth < 750){
				this.pageNum = 3;
				this.showFont = false
			}else if(window.innerWidth < 930){
				this.pageNum = 5;
				this.showFont = true;
			}else{
				this.pageNum = 7;
				this.showFont = true;
			}
			//列表调整
			if(this.data.totalPage > this.pageNum){// 页数大于8显示省略号
				let num = Math.floor(this.pageNum/2);
				let start = this.page - num;
				let end = this.page + num;
				let endIndex = this.data.totalPage - num;
				if(this.page <= num + 1){//前面固定，后面显示省略号
					this.showAfterEllipsis = true;
					this.pageList.forEach((item,index)=>{
						if(index > this.pageNum - 1){
							item.style.display = 'none';
						}
					})
				}else if(this.page > endIndex - 1){//后面固定，前面显示省略号
					this.showBeforeEllipsis = true;
					this.pageList.forEach((item,index)=>{
						if(index < this.data.totalPage - this.pageNum){
							item.style.display = 'none';
						}
					})
				}else{//中间部分，前后省略号都显示
					this.showBeforeEllipsis = true;
					this.showAfterEllipsis = true;
					this.pageList.forEach((item,index)=>{
						if(index < start - 1||index > end - 1){
							item.style.display = 'none';
						}
					})
				}
			}
		},
		methods:{
			toPreviousPage(){
				this.$router.push({
					path:this.data.baseUrl,
					params:{
						_page:this.data.page === 1?this.data.baseUrl:`${this.data.baseUrl}/${this.data.page - 1}`
					}
				});
			},
			toNextPage(){
				this.$router.push({
					path:this.data.baseUrl,
					params:{
						_page:this.data.totalPage >= this.data.page?`${this.data.baseUrl}/${this.data.totalPage}`:`${this.data.baseUrl}/${this.data.page + 1}`
					}
				});
			},
			toEndPage() {
				this.$router.push({
					path: this.data.baseUrl,
					params: {
						_page: `${this.data.baseUrl}/${this.data.totalPage}`
					}
				});
			}
		},
		computed:{
			previousPage(){
				return this.data.page === 1?this.data.baseUrl + '/1':`${this.data.baseUrl}/${this.data.page - 1}`;
			},
			nextPage(){
				return this.data.page === this.data.totalPage?`${this.data.baseUrl}/${this.data.page}`:`${this.data.baseUrl}/${this.data.page + 1}`;
			},
			endPage(){
				return `${this.data.baseUrl}/${this.data.totalPage}`;
			}
		}
	}
</script>

<style scoped>
    .webpage-articles-pages{
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 12px;
    }
    .webpage-articles-page{
        padding: 5px 10px;
        background-color: #fff;
        transition: .5s;
    }
    .webpage-articles-page:hover{
        cursor: pointer;
        background-color: #7F828B;
    }
    .webpage-articles-page:last-child:hover{
        cursor: default;
        color: #47494e;
        background-color: #fff;
    }
    .webpage-articles-page a{
        transition: .5s;
    }
    .webpage-articles-page:hover a{
        color: #fff;
    }
    .pagelists{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .pagelists > li{
        margin:0 5px;
    }
    .pagelist{
        padding: 5px 10px;
        background-color: #fff;
    }
    .page-selected{
        background-color: #7F828B;
    }
    .page-selected a{
        color:#fff;
    }
    @media screen and (max-width: 750px){
        .webpage-articles-pages{
            margin-bottom: 20px;
        }
        .webpage-articles-page:last-child{
            display: none;
        }
    }
</style>